<template>
  <van-popup lazy-render v-model:show="isShow" position="left" :style="{ width: '260px', height: '100%' }">
    <template #default>
      <div>
        <!--          top-->
        <div class="box-border flex items-center justify-between hairline-bottom px-5 py-4 mb-4">
          <nuxt-link :to="$localePath('/')" external>
            <WImage class="h-8 w-[85px]" :src="useAsset('logo/logo.png')" />
          </nuxt-link>
          <van-icon @click="isShow = false" class="text-gray-light" size="18" name="cross" />
        </div>
        <!--          list-->
        <div>
          <van-collapse accordion v-model="activeName">
            <van-collapse-item v-for="(item, index) in categoryTree" :name="+item.id" :key="item.id">
              <template #title>
                <div class="flex items-center">
                  <y-image
                    placeholder
                    class="ltr:mr-4 rtl:ml-4 w-5 h-5 object-contain object-center"
                    width="25"
                    :src="$withPicOrigin(item.smallIcon)"
                    :alt="item.categoryName" />
                  <nuxt-link
                    external
                    :to="$localePath(`/category/${item.id}/1`)"
                    class="line-clamp-2 uppercase text-sm">
                    {{ item.categoryName }}
                  </nuxt-link>
                </div>
              </template>
              <div class="rounded-md bg-[#23282a] py-3 px-3">
                <NuxtLink
                  external
                  :to="$localePath(`/category/${item.id}/${sItem.id}/1`)"
                  @click="isShow = false"
                  class="mb-4 last:mb-0 box-border flex items-center"
                  v-for="(sItem, idx) in item.subCategories"
                  :key="idx">
                  <w-image
                    class="ltr:mr-4 rtl:ml-4 w-5 h-5 object-contain object-center"
                    width="20"
                    :src="getCategoryIcon(sItem.id)"
                    :alt="sItem.categoryName" />
                  <p class="line-clamp-2 text-sm text-[#fff]">
                    {{ sItem.categoryName }}
                  </p>
                </NuxtLink>
              </div>
            </van-collapse-item>
          </van-collapse>
        </div>
      </div>
    </template>
  </van-popup>
</template>

<script setup lang="ts">
import WImage from '~/components/logic/WImage.vue'
import { useHomeStore } from '~/store/home'
import { useCategoryStore } from '~/store/category'
import YImage from '~/components/logic/YImage.vue'

const CategoryStore = useCategoryStore()
const { categoryTree } = storeToRefs(CategoryStore)
const props = defineProps(['modelValue', 'categoryList', 'activeIndex'])
const emit = defineEmits(['update:modelValue'])
const isShow = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', val)
  },
})

const activeName = ref(props.activeIndex ? +props.activeIndex : categoryTree.value[0].id)
const { useAsset } = useCommonPlugin()
const categories = categoryTree.value.map((item) => item.subCategories).flat(Infinity) || []

const getCategoryIcon = (id) => {
  return useAsset(`goods-icons/${categories.findIndex((item) => item.id === id) % 20}`)
}
</script>

<style scoped lang="scss">
:deep(.van-popup--left) {
  background-color: #31383b;
}

:deep(.van-cell) {
  background-color: transparent;
  color: #fff;
}

:deep(.van-collapse-item--border:after) {
  display: none;
}

:deep(.van-cell__right-icon) {
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

:deep(.van-hairline--top-bottom:after, .van-hairline-unset--top-bottom:after) {
  display: none;
}

:deep(.van-collapse-item__content) {
  background-color: transparent;
}

:deep(.van-cell:after) {
  display: none;
}
</style>
